<template>
  <div class="container">
    <!-- 顶部导航栏-->
    <el-menu
        class="el-menu-demo"
        mode="horizontal"
        background-color="#fff"
    >
      <el-menu-item>
        <img
            style="height: 100%;"
            src="../assets/Tips.jpg"
            alt="logo"
        />
      </el-menu-item>
    </el-menu>
    <!--左边和右边-->
    <div class="mainView">
      <el-menu
          class="el-menu-vertical-demo leftView"
          background-color="#545c64"
          text-color="#fff"
      >
        <div class="gupiaoList">
          <el-menu-item v-for="(item,index) in list" :index="index.toString()" @click="updateRightValue(item)">
            <span>{{ item.name }}</span>
          </el-menu-item>
        </div>
        <el-menu-item style="background-color: #4899e3" index="10000" @click="changeShowDialog(true, false)">
          <span>监控新股票</span>
        </el-menu-item>
        <el-menu-item style="background-color: #c9bcbc" index="100000" @click="useExit()">
          <span>退出</span>
        </el-menu-item>
      </el-menu>
      <div class="rightView">
        <el-form v-if="list.length > 0" :model="rightData">
          <el-form-item label="股票编号:">
            <el-input disabled :placeholder="rightData && rightData.id.toString()"/>
          </el-form-item>
          <el-form-item label="股票名称:">
            <el-input disabled :placeholder="rightData && rightData.name"/>
          </el-form-item>
          <el-form-item label="股票价格:">
            <el-input disabled :placeholder="rightData && rightData.price.toString()"/>
          </el-form-item>
          <el-form-item label="买入价格:">
            <el-input disabled :placeholder="rightData && rightData.buyPrice.toString()"/>
          </el-form-item>
          <el-form-item label="最高卖点:">
            <el-input disabled :placeholder="rightData && rightData.sellHigh.toString()"/>
          </el-form-item>
          <el-form-item label="最低卖点:">
            <el-input disabled :placeholder="rightData && rightData.sellLow.toString()"/>
          </el-form-item>
          <el-form-item label="买入状态:">
            <el-input disabled :placeholder="rightData && rightData.isBuy ? '已买入' : '未买入'"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="changeShowDialog(true,true, rightData)">修改股票</el-button>
            <el-button type="primary" @click="deleteGuPiao(rightData.id)">删除股票</el-button>
            <el-button type="primary" @click="updateBuy">切换买入状态</el-button>
          </el-form-item>
        </el-form>
        <div v-else>暂未添加股票监控</div>
      </div>
    </div>
    <!--弹出框 新增和修改-->
    <el-dialog v-model="showDialog" :title="isUpdate ? showDialog.id : '新增监控'">
      <el-form :model="dialogData">
        <el-form-item label="股票编号:">
          <el-input :disabled="isUpdate" placeholder="请输入股票编号" v-model="dialogData.id"/>
        </el-form-item>
        <el-form-item label="股票名称:" v-if="isUpdate">
          <el-input :disabled="isUpdate" placeholder="暂未获取" v-model="dialogData.name"/>
        </el-form-item>
        <el-form-item label="股票价格:" v-if="isUpdate">
          <el-input :disabled="isUpdate" placeholder="暂未获取" v-model="dialogData.price"/>
        </el-form-item>
        <el-form-item label="买入价格:">
          <el-input placeholder="请输入建议买入价格" v-model="dialogData.buyPrice"/>
        </el-form-item>
        <el-form-item label="最高卖点:">
          <el-input placeholder="请输入建议最高卖点价格" v-model="dialogData.sellHigh"/>
        </el-form-item>
        <el-form-item label="最低卖点:">
          <el-input placeholder="请输入建议最低卖点价格" v-model="dialogData.sellLow"/>
        </el-form-item>
        <el-form-item label="买入状态:" v-if="isUpdate">
          <el-input disabled :placeholder="dialogData.isBuy ? '已买入' : '未买入'"/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="saveGuPiao">确认</el-button>
          <el-button type="primary" @click="changeShowDialog(false)">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script setup>
import {useExit} from "../composition/useUser.js";
import {
  useGuPiao,
  useDeleteGuPiao,
  useUpdateGuPiaoBuy,
  useUpdateGuPiao, useSaveGuPiao
} from "../composition/useGuPiao.js";

const list = ref([]);
const rightData = ref({
  id: '',
  name: '',
  price: '',
  buyPrice: '',
  sellHigh: '',
  sellLow: '',
  isBuy: false,
});
const showDialog = ref(false);
const dialogData = ref({
  id: '',
  name: '',
  price: '',
  buyPrice: '',
  sellHigh: '',
  sellLow: '',
  isBuy: false,
});
const isUpdate = ref(false);

async function initData(id) {
  await useGuPiao(list);
  list.value[0] && (rightData.value = list.value[0]);
  if (id) {
    rightData.value = list.value.filter(item => item.id === id)[0];
  }
}

const deleteGuPiao = async (id) => {
  await useDeleteGuPiao(id);
  initData();
}

const changeShowDialog = (show, updateValue, updateData) => {
  if (!show) {
    showDialog.value = false;
    return;
  }
  showDialog.value = true;
  dialogData.value = updateData;
  changeIsUpdate(updateValue);
}

const changeIsUpdate = (value) => {
  isUpdate.value = value;
  if (!value) {
    resetDialogData()
  }
}

const resetDialogData = () => {
  dialogData.value = {
    id: '',
    name: '',
    price: '',
    buyPrice: '',
    sellHigh: '',
    sellLow: '',
    isBuy: false,
  }
}

const updateRightValue = (value) => {
  rightData.value = value;
}

// 切换是否买入
const updateBuy = async () => {
  await useUpdateGuPiaoBuy(rightData.value.id, !rightData.value.isBuy);
  rightData.value.isBuy = !rightData.value.isBuy;
}

// 更新或者创建股票信息
const saveGuPiao = async () => {
  let {id, buyPrice, sellHigh, sellLow} = dialogData.value;
  if (isUpdate.value) {
    await useUpdateGuPiao(id, buyPrice, sellHigh, sellLow);
    changeShowDialog(false);
    return;
  }
  await useSaveGuPiao(id, buyPrice, sellHigh, sellLow);
  await initData(id);
  changeShowDialog(false);
}

onMounted(async () => {
  await initData();
})

// 定时器检查如果有暂未实现就2s刷新一次数据，并且在弹窗打开时不刷新
setInterval(() => {
  if (showDialog.value) {
    return;
  }
  if (JSON.stringify(list.value).includes('暂未实现')) {
    initData(rightData.value.id);
  }
}, 2000)

</script>

<style scoped lang="scss">
.container {
  width: 100%;
  height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;

  .mainView {
    display: flex;
    flex-direction: row;
    flex: 1;
    height: calc(100% - 60px);

    .leftView {
      max-width: 30vw;
      width: 200px;
      height: 100%;
      overflow-y: auto;
      :deep(.el-menu-item) {
        padding: 0;
        justify-content: center;
      }

      .gupiaoList {
        height: calc(100% - var(--el-menu-item-height) * 2);
        overflow: hidden;
        overflow-y: auto;
      }
    }

    .rightView {
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      padding-top: 10px;
      align-items: center;
      flex: 1;

      :deep(.el-form-item__content) {
        .el-button + .el-button {
          margin-left: 0;
        }

        gap: 15px
      }
    }
  }
}

@media screen and (max-width: 768px) {
  .mainView .leftView {
    .gupiaoList {
      --el-menu-item-height: 45px;
      font-size: 12px;
    }
    :deep(.el-menu-item) {
      --el-menu-item-height: 45px;
      font-size: 12px;
    }
  }
}
</style>
